<template>
	<view class="ts-flex ts-column ts-flex-item">

		<!-- 弹出窗口 -->
		<view class="mask" v-show="showMask" @click="hide"></view>
		<view class="popup popup-bottom" v-show="showState">
			<view class="ts-media-list">
				<image class="ts-media-list-logo" :src="item.img"></image>
				<view class="ts-media-list-body">
					<view class="ts-media-list-text-top ts-ellipsis-2">{{item.title}}</view>
					<view class="ts-media-list-text-middle">
						<view class="ts-flex ts-flex-item ts-flex-row">
							<text class="ts-h6">{{item.seller_count}}</text>
							<text class="ts-h6 ts-padding-left">库存剩{{item.stock}}件</text>
						</view>
					</view>
					<view class="ts-media-list-text-bottom">
						<view class="ts-flex ts-flex-item ts-flex-row">
							<view class="ts-flex ts-flex-item">
								<text class="ts-h4 ts-text-bold">￥{{item.price/100}}</text>
								<text class="ts-h4 ts-text-red ts-text-discount" style="padding-left: 10upx;">￥{{item.origin_price/100}}</text>
							</view>
							<view class="ts-flex">
								<view class="ts-numbox">
									<view class="ts-numbox-minus" @click="handleCount(-1)">-</view>
									<input class="ts-numbox-value" type="number" v-model="count" disabled>
									<view class="ts-numbox-plus" @click="handleCount(1)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<button type="warn" style="width: 100%; background-color: #e31436; 	border-radius: 0upx; height: 100upx;" @click="addCart(item)">确定</button>
		</view>

		<view class="cart" @tap="gotoCart">
			<image src="../../static/cart.png" />
			<text v-show="countAll>0" class="ts-badge ts-badge-danger">{{countAll}}</text>
		</view>


		<ts-search-bar :readonly="true" @tap="gotoSearch"></ts-search-bar>
		<ts-segmented-control :values="tabs" v-model="currentTab" style-type="text" active-color="#d81e06" @clickItem="clickItem"
		 borderColor="#d81e06"></ts-segmented-control>


		<view class="ts-list">
			<view class="ts-list-cell" hover-class="ts-list-cell-hover" v-for="(item,index2) in productList" :key="index2">
				<view class="ts-media-list">
					<image class="ts-media-list-logo" :src="item.img" @tap="viewDetail(item.product_id)"></image>
					<view class="ts-media-list-body">
						<view class="ts-media-list-text-top ts-ellipsis-2" @tap="viewDetail(item.product_id)">{{item.title}}</view>
						<view class="ts-media-list-text-middle">
							<view class="ts-flex ts-flex-item ts-flex-row">
								<text class="ts-h6">{{item.seller_count}}</text>
								<text class="ts-h6 ts-padding-left">库存剩{{item.stock}}件</text>
							</view>
						</view>
						<view class="ts-media-list-text-bottom">
							<view class="ts-flex ts-flex-item ts-flex-rowr">
								<view class="ts-flex ts-flex-item" style="align-items: center;">
									<text class="ts-h4 ts-text-red ts-text-bold">￥{{item.price/100}}</text>
									<text class="ts-h4 ts-text-discount ts-padding-left">￥{{item.origin_price/100}}</text>
									<!-- <ts-badge text="爆款" type="warn" padding-left="20"></ts-badge> -->
								</view>
								<view class="ts-flex">
									<button type="warn" size="mini" @click="show(item)">购买</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="ts-column">
			<ts-load-more :loadingType="loadingType" :contentText="contentText" @tap="loadMoreShopProduct"></ts-load-more>
		</view>
	</view>
</template>
<script>
	import tsBanner from '@/components/teaset/components/ts-banner.vue';
	import tsSearchBar from '@/components/teaset/components/ts-search-bar.vue';
	import tsSegmentedControl from '@/components/teaset/components/ts-segmented-control.vue';

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			tsBanner,
			tsSearchBar,
			tsSegmentedControl,
		},
		data(){return  {

			tabs: ['店长推荐', '新品'],
			storeId: '682731', //贝店序号		
			currentTab: 0,

			productList: [],
			loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
			page: 0,

			showMask: false,
			showState: false,
			item: {
				stock: 0,
				seller_count: 0,
				title: '',
				img: '',
				product_id: 0
			},
			count: 1 //购买的数量
		}},
		computed: {
			cartList() {
				return this.$store.getters.cartList;
			},
			countAll() {
				let count = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						count += item.count;
					}
				});
				return count;
			},
		},

		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: 'search'
				})
			},
			handleCount(count) {
				if (count < 0 && this.count === 1) {
					uni.showModal({
						title: '提示',
						content: '最少要选择一件商品，确定放弃购买吗？',
						success: (res) => {
							if (res.confirm) {
								this.hide();
								return;
							} else if (res.cancel) {
								return;
							}
						}
					});
				} else {
					this.count += count;
				}
			},
			addCart: function(item) {
				this.hide();
				uni.showToast({
					title: '添加到购物车',
				})

				this.$store.commit('addCart', {
					value: this.item,
					count: this.count
				});
			},
			show(item) {
				this.count = 1;

				this.item = item;
				this.showMask = true;
				this.showState = true;
			},
			hide() {
				this.showMask = false;
				this.showState = false;
			},
			gotoCart() {
				uni.navigateTo({
					url: '/pages/shopingcart/index'
				});
			},
			viewDetail(product_id) {
				uni.navigateTo({
					url: `detail?product_id=${product_id}`
				});
			},

			clickItem(index) {
				// console.log('clickItem');
				this.init();
				this.doLoadMoreData();
			},

			loadMoreShopProduct() {
				//上拉的状态：0-loading前；1-loading中；2-没有更多了
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.page = this.page + 1;

				uni.request({
					url: this.$API_BASE + `/app/store/getProductList`,
					method: 'GET',
					dataType: 'json',
					data: {
						store_id: this.storeId,
					},
					success: (response) => {
						const res = response.data;
						if (res.success) {
							const data = res.data;
							if (data) {
								this.productList = this.productList.concat(data);
							}
							if (res.has_more === false) {
								this.loadingType = 2; //2-没有更多了
							} else {
								this.loadingType = 0; //开启新一轮加载
							}
						} else {
							console.log(res.message);
						}
					}
				});
			},
			doLoadMoreData() {
				//更具当前的Tab加载相应的数据

				//店长推荐
				if (this.currentTab === 0) {
					this.loadMoreShopProduct();
				}

				//最新推荐
				if (this.currentTab === 1) {
					this.loadMoreShopProduct();
				}
			},
			init() {
				this.productList = [];
				this.page = 0;
				this.loadingType = 0;
				this.currentTab = 0;
			},
		},
		onLoad(e) {
			this.storeId = e.store_id | this.store_id;
			this.init();
			this.doLoadMoreData();
		},
		onReachBottom() {
			this.doLoadMoreData();
		},
		onPullDownRefresh() {
			this.init();
			this.doLoadMoreData();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		}
	};
</script>

<style>
	.button-row {
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: center;
	}

	.button-row button {
		margin-left: 10upx;
	}

	.button-row button:first-child {
		margin-left: 0upx;
	}



	.cart {
		position: fixed;
		display: block;
		z-index: 997;
		bottom: 50upx;
		right: 50upx;

		width: 100upx;
		height: 100upx;
		/* border: 1upx solid #dddddd; */
		border-radius: 100upx;
		margin: 0 40upx;
		background-color: #ffb400;
	}

	.cart image {
		width: 60upx;
		height: 60upx;
		margin: 20upx;
	}

	.cart text {
		position: fixed;
		bottom: 100upx;
		right: 100upx;
	}

	.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.popup {
		position: fixed;
		display: flex;
		flex-direction: column;
		flex: 1;
		z-index: 999;
		background-color: #ffffff;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
	}

	.popup-bottom {
		bottom: 0;
		width: 100%;
		/* 	height: 500upx; */
		/* text-align: left; */
	}

	.ts-numbox {
		display: flex;
		flex-direction: row;
		height: 50upx;
	}

	.ts-numbox-minus,
	.ts-numbox-plus {
		margin: 0;
		background-color: #f9f9f9;
		width: 50upx;
		line-height: 50upx;
		justify-content: center;
		color: #555555;
		font-size: 24upx;
		border: 0upx;
	}

	.ts-numbox-value {
		border: 0upx;
		width: 100upx;
		font-size: 24upx;
		text-align: center;
	}

	.ts-numbox-disabled {
		color: #c0c0c0;
	}



	.ts-media-list-logo {
		height: 200upx;
		width: 200upx;
		margin-right: 20upx;
	}

	.ts-media-list-body {
		height: 200upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.ts-media-list-text-top {
		font-size: 25upx;
		line-height: 30upx;
		height: 60upx;
	}

	.ts-media-list-text-middle {
		font-size: 20upx;
		width: 100%;
	}

	.ts-media-list-text-bottom {
		font-size: 20upx;
		color: #8f8f94;
		width: 100%;
	}
</style>
